import React, {Component} from 'react';

import AddItem from '../add-item/add-item'
import ItemList from '../item-list/item-list'

export default class App extends Component {

    // 传统写法
    /*constructor(props) {
        super(props) // 第一行必须这样写
        this.state = {
            comments: [
                {username: 'Tom', content: "react is OK!"},
                {username: 'Jack', content: "vue is OK!"},
            ]
        }
        this.addItem =  this.addItem.binding(this)
    }*/
    // 直接给 state 属性赋值
    state = {
        comments: [
            {username: 'Tom', content: "react is OK!"},
            {username: 'Jack', content: "vue is OK!"},
        ]
    }

    // 使用这种方式就不用在 constructor 中 binding this 了
    addItem = (comment) => {
        console.log(`添加了评论：${comment.username}, ${comment.content}`)
        const {comments} = this.state
        comments.unshift(comment)
        this.setState({comments})
    }

    render() {
        const comments = this.state.comments;
        return (
            <div>
                <AddItem  addItem={ this.addItem } />
                <hr />
                <ItemList  comments={ comments } />
            </div>
        )
    }


}
